<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'
// 搜索
const input = ref('')


//文章列表数据模型
const articles = ref([
    {
        "id": "1",
        "name": "cpu告警",
        "type": "鼠标告警",
        "type2": "AP",
        "index": "cpu_rate",
        "rule": "cpu_rate>80",
        "level": "严重"
    },
    {
        "id": '2',
        "name": "cpu告警",
        "type": "鼠标告警",
        "type2": "AP",
        "index": "cpu_rate",
        "rule": "cpu_rate>80",
        "level": "严重"
    },
    {
        "id": '3',
        "name": "cpu告警",
        "type": "鼠标告警",
        "type2": "AP",
        "index": "cpu_rate",
        "rule": "cpu_rate>80",
        "level": "严重"
    },
    {
        "id": '16',
        "name": "cpu告警",
        "type": "鼠标告警",
        "type2": "AP",
        "index": "cpu_rate",
        "rule": "cpu_rate>80",
        "level": "严重"
    },
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
}


// 获取故障设备已解决数据
import { deviceStraListService } from '@/api/SiteMana.js'
const deviceStraList = ref('')
const deviceStraService = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value
    }
    let result = await deviceStraListService(params);
    total.value = result.data.total
    deviceStraList.value = result.data.items
    // console.log(deviceWarnList.value);
}
deviceStraService()


</script>
<template>
    <el-card class="page-container">
        <!-- 文章列表 -->
        <el-icon style="margin-bottom: 20px;" :size="20">
            <Plus />
        </el-icon>
        <el-table :data="deviceStraList" style="width: 100%">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="告警设备名称" prop="name2"> </el-table-column>
            <el-table-column label="告警问题" prop="warnProblem"></el-table-column>
            <el-table-column label="告警级别" prop="warnLevel">
                <template #default="{ row }">
                    <span v-if="row.warnLevel === '严重'" style="color: #ed3f35;font-weight: 800;">严重</span>
                    <span v-if="row.warnLevel === '中等'" style="color: #eacf19;font-weight: 800;">中等</span>
                    <span v-if="row.warnLevel === '轻微'" style="color: #00ff00;font-weight: 800;">轻微</span>
                </template>
            </el-table-column>
            <el-table-column label="告警时间" prop="warnTime"></el-table-column>
            <el-table-column label="处理策略" prop="straWay"></el-table-column>
            <el-table-column label="处理时间" prop="straTime"></el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" layout="total, prev, pager, next"
            background :total="total" @size-change="onSizeChange" @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>
<style lang="scss" scoped>
h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 400;
}

.page-container {
    min-height: 100%;
    box-sizing: border-box;

}
</style>